<!DOCTYPE html >
<html>
<head>
<meta name="Generator" content="TPSHOP v1.1" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="applicable-device" content="mobile">
<title>在线客服</title>
<meta http-equiv="keywords" content="{$tpshop_config['shop_info_store_keyword']}" />
<meta name="description" content="{$tpshop_config['shop_info_store_desc']}" />
<script type="text/javascript" src="__PUBLIC__/js/jquery-1.8.2.min.js"></script>
</head>
<link rel="stylesheet" href="http://s.workerman.net/layui/css/layui.css" media="all">
<link rel="stylesheet" href="http://s.workerman.net/layui/css/modules/layim/layim.css" media="all">
<link rel="stylesheet" href="//at.alicdn.com/t/font_j54f9utsgm1pds4i.css" media="all">
<script src='//cdn.bootcss.com/socket.io/1.3.7/socket.io.js'></script>
<style>
.gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}
#wrapper{background: #fff;}
.layim-chat-footer {
    border-top: 1px solid #F1F1F1;
    position: absolute;
    bottom: 0;
    background: #fff;
    width: 100%;
}
.pullDown {background: #fff;color:#ccc;font-size:12px;text-align: center;margin-top:-30px;padding-bottom:10px; }
.pullUp{display: none;}
#facebox{border-right:1px solid #eee;border-top:1px solid #eee;}
#facebox table tr td{border-left:1px solid #eee;border-bottom:1px solid #eee;background: #fff}
.self{text-align: right}
.self .layim-chat-user{right:3px;}
.self .layim-chat-user cite{text-align: right;width:100%;left:-60px;}
.self .layim-chat-user cite i{margin-right:10px;}
.self .layim-chat-text{margin-right:60px;}
.self .layim-chat-text::after {
    right: -10px!important;
    left:auto;
}
.tips,.tip{padding-left: 0px!important;min-height: 20px!important;}
.marT20{margin-top: 20px}
</style>
<body style="background:#eee">
<div class="layermchild">
<div class="layim-chat-main" id="wrapper" data-box="{$user.user_id}">
<ul>
   
</ul>
</div>
<div class="layim-chat-footer"><div class="layui-unselect layim-chat-tool"><span class="layui-icon emotion" title="选择表情" layim-event="face"></span><span class="layui-icon layim-tool-image" title="上传图片" layim-event="image"><input name="file" type="file"></span><span class="layui-icon layim-tool-image" title="发送文件" layim-event="image" data-type="file"><input name="file" type="file"></span></div><div class="layim-chat-textarea"><textarea id="saytext" name="saytext"></textarea></div><div class="layim-chat-bottom"><div class="layim-chat-send"><span class="layim-send-close" layim-event="closeThisChat">关闭</span><span class="layim-send-btn" layim-event="send">发送</span><span class="layim-send-set" layim-event="setSend" lay-type="show"><em class="layui-edge"></em></span><ul class="layui-anim layim-menu-box"><li class="layim-this" layim-event="setSend" lay-type="Enter"><i class="layui-icon"></i>按Enter键发送消息</li><li layim-event="setSend" lay-type="Ctrl+Enter"><i class="layui-icon"></i>按Ctrl+Enter键发送消息</li></ul></div></div></div>
</div>
<script src="__STATIC__/js/iscroll.js?a=22"></script>
<script src="__STATIC__/js/pullToRefresh.js"></script>
<script type="text/javascript" src="__STATIC__/js/jquery.qqFace.js"></script>
<!-- <script src="__PUBLIC__/js/vconsole.min.js"></script> -->
<script>
refresher.init({
  id:"wrapper",
  pullDownAction:Load,
  pullUpAction:Refresh                               
  }); 
var p=parseInt('{$page}')+1;
var is=true;
var kf_no='';
var kefustr="";
var kf=JSON.parse('{$kefuinfo}');
Load();
function Load() {
    p--;
    if(p>0){
      $.get('{:U("Webchat/index")}',{p:p,user_id:'{$user.user_id}',type:'get_chat_list'},function(res){
          var obj=JSON.parse(res);
          loading_mesg(res);
          if(is){
            $('#wrapper ul').append('<div class="tip" style="text-align:center;font-size:12px;color:#fff;margin-bottom:20px"><span style="background:#ccc;padding:2px 5px;border-radius:5px">以上是历史消息记录</span></div>');
            is=false;
            if(obj.length<5) $('#wrapper .scroller').addClass('marT20');
          }else{
            $('#wrapper .scroller').removeClass('marT20');
          }

      })
    }
}
//监听textare值是否变化
/*document.getElementById("saytext").oninput = function () {
    parent.onputin();
   
};*/


function loading_mesg(res){
    var obj=JSON.parse(res);
    for(var i=0;i<obj.length;i++){
      var htmlstr="";
      if(obj[i].from_uid.indexOf('kefu')>-1){
        var classname="kefu";
        var kf_no=obj[i].from_uid;
        if(kefustr.indexOf(obj[i].from_uid)==-1){
           htmlstr+='<li class="tips" style="text-align:center;font-size:12px;color:#fff;margin:20px 0px;"><span style="background:#ccc;padding:2px 5px;border-radius:5px">'+kf[kf_no].kf_name+'已接入</span></li>';
        }
        kefustr+=obj[i].from_uid;
      }else{
        var classname="self";
      }
      

        htmlstr+='<li data-target="'+obj[i].from_uid+'" class="'+classname+'"><div class="layim-chat-user">';
      if(obj[i].from_uid.indexOf('kefu')>-1){
        htmlstr+='<img src="'+kf[kf_no].kf_headpic+'"><cite>'+kf[kf_no].kf_name+'<i>'+timetrans(obj[i].time)+'</i></cite>';
      }else{
        htmlstr+='<img src="{$user.head_pic}"><cite><i>'+timetrans(obj[i].time)+'</i>{$user.nickname|shownickname=###}</cite>';
      }
      
        htmlstr+='</div><div class="layim-chat-text">'+replace_em(obj[i].message)+'</div></li>';
      $('#wrapper ul').prepend(htmlstr);

    }
    Refresh()
}
function Refresh() {       
        wrapper.refresh();
    } 
$(document).ready(function () {
      var win_h= $(window).height();
      $('.scroller').css('min-height',(win_h-178)+'px')
      var chat_main=$('.layim-chat-main');
      chat_main.height(win_h-178);
      var mess_id=0;
      var uid='{$user.user_id}';
      var to_uid='';
      // 连接服务端
      var socket = io('http://'+document.domain+':2120');
      // 连接后登录
      socket.on('connect', function(){
        socket.emit('login', uid);
      });
      // 后端推送来消息时
      socket.on('new_msg', function(msg){
          var obj=JSON.parse(msg);
           chat_main.find('ul').append('<li data-target="'+obj.from+'"><div class="layim-chat-user"><img src="'+obj.head_pic+'"><cite>'+obj.nickname+'<i>'+obj.time+'</i></cite></div><div class="layim-chat-text">'+replace_em(obj.content)+'</div></li>');
           to_uid=obj.from
           scrool_bottom();
           parent.add_tips(1);
      });
      
      // 后端推送来分配客服
      socket.on('fp_kefu', function(kefu_id){
              kf_no=kefu_id;
              if(kf_no){
                  parent.add_kefu_name(kf[kf_no].kf_name);
                  chat_main.find('.tips').remove();
                  chat_main.find('ul').append('<div class="tip" style="text-align:center;font-size:12px;color:#fff;margin:20px 0px"><span style="background:#69BC80;;padding:2px 5px;border-radius:5px">'+kf[kf_no].kf_name+'已接入</span></div>');
                  $('#wrapper').append('<input type="hidden" id="kf'+kf_no+'" value="1">');
                  //推送自动回复语句
                 /* $.post('{:U("Webchat/auto_replay")}',{kf_no:kf_no},function(res){

                  })*/
              }else{
                  chat_main.find('.tips').remove();
                  chat_main.find('ul').append('<div class="tip" style="text-align:center;font-size:12px;color:#fff;margin:20px 0px"><span style="background:#ccc;padding:2px 5px;border-radius:5px">目前没有客服在线</span></div>');
              }
              scrool_bottom();
      });
      //后端推送用户下线状态
      socket.on('on_user_offline', function(status){
          var obj=JSON.parse(status);
          for(var i=0;i<obj.length;i++){
            $('[data-target="'+obj[i]+'"]').find('img').addClass('gray');
            chat_main.find('.tips').remove();
            $('#kf'+obj[i]).parent().find('ul').append('<div class="tip" style="text-align:center;font-size:12px;color:#fff;margin-bottom:20px"><span style="background:#ccc;padding:2px 5px;border-radius:5px">'+kf[obj[i]].kf_name+'已离线</span></div>');
          }     
           scrool_bottom();
      });

      //后端推送用户上线状态
      socket.on('on_user_online', function(status){
           var obj=JSON.parse(status);
          for(var i=0;i<obj.length;i++){
            $('[data-target="'+obj[i]+'"]').find('img').removeClass('gray');
          }
          
      });

      // 上线时推送留言消息
      socket.on('off_mes_user', function(wait_re){
          $.post('{:U("Webchat/get_kefu_re_message")}',{re_list:wait_re,msg_type:1},function(res){
            var obj=JSON.parse(res);
              for(var i=0;i<obj.length;i++){
                  $('[data-box="'+obj.to_uid+'"]').find('ul').append('<li><div class="layim-chat-user"><img src="'+obj[i].kf_headpic+'"><cite>'+obj[i].kf_name+'<i>'+timetrans(obj[i].time)+'</i></cite></div><div class="layim-chat-text">'+replace_em(obj[i].message)+'</div></li>');
              }
              scrool_bottom();
          })
      });

      $('.layim-send-btn').click(function(){
         var content=$('.layim-chat-textarea textarea').val();
         if(myTrim(content)=="") return false;
         var show_cont=replace_em(content);
         show_cont=show_cont.replace('<；br/>；','<br/>');
         mess_id++;
         var time=getNowFormatDate();
         chat_main.find('ul').append('<li class="self" temp="'+mess_id+'"><div class="layim-chat-user"><img src="{$user.head_pic}"><cite><i>'+time+'</i>{$user.nickname|shownickname=###}</cite></div><div class="layim-chat-text">'+show_cont+'</div></li>');
         scrool_bottom();
         //chat_main.scrollTop(chat_main[0].scrollHeight);
         $('.layim-chat-textarea textarea').val('');
        $.post('{:U("Webchat/send_message")}',{msg_type:1,to:kf_no,content:content,from:uid,time:time,head_pic:'{$user.head_pic}',nickname:'{$user.nickname|shownickname=###}'},function(res){
            var obj=JSON.parse(res);
            to_uid=obj.to_uid;
            if(obj.status=="no_kefu_noline"){
                   chat_main.find('.tips').remove();
                   chat_main.find('ul').append('<li class="tips" style="text-align:center;font-size:12px;color:#fff;margin-bottom:20px;"><span style="background:#ccc;padding:2px 5px;border-radius:5px">当前没有客服在线</span></li>');
                  
            }
            if(obj.status=="offline"){
                   chat_main.find('.tips').remove();
                   chat_main.find('ul').append('<li class="tip" style="text-align:center;font-size:12px;color:#fff;margin-bottom:20px"><span style="background:#ccc;padding:2px 5px;border-radius:5px">当前客服不在线</span></li>');
            }
            scrool_bottom();


        })
      })


      $('.emotion').qqFace({
        id : 'facebox', //表情盒子的ID
        assign:'saytext', //给那个控件赋值
        path:'__STATIC__/face/'  //表情存放的路径
      });
  });
function replace_em(str){ 
    str = str.replace(/\</g,'<；'); 
    str = str.replace(/\>/g,'>；'); 
    str = str.replace(/\n/g,'<；br/>；'); 
    str = str.replace(/\[em_([0-9]*)\]/g,'<img src="__STATIC__/face/$1.gif" border="0" />'); 
    return str; 
} 
function myTrim(x) {
    return x.replace(/^\s+|\s+$/gm,'');
}
function scrool_bottom(){
 
  var height=0-$('.scroller').height()+$('#wrapper').height()+20;
  wrapper.scrollToBottom(0,height);
  Refresh();
}
function getNowFormatDate() {
    var date = new Date();
    var seperator1 = "-";
    var seperator2 = ":";
    var month = date.getMonth() + 1;
    var strDate = date.getDate();
    if (month >= 1 && month <= 9) {
        month = "0" + month;
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
    }
    var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
            + " " + date.getHours() + seperator2 + date.getMinutes()
            + seperator2 + date.getSeconds();
    return currentdate;
} 
function timetrans(date){
    var date = new Date(date*1000);//如果date为10位不需要乘1000
    var Y = date.getFullYear() + '-';
    var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
    var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
    var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
    var m = (date.getMinutes() <10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
    var s = (date.getSeconds() <10 ? '0' + date.getSeconds() : date.getSeconds());
    return Y+M+D+h+m+s;
}

</script>
</body>   
</html>